<template>
  <div style="height: inherit">
    <div>
      <!-- 语言选择下拉菜单 -->
      <Select placeholder="选择语言" style="width:120px" @on-change="getLanguage">
        <Option v-for="(item,index) in language" :value="index" :label-in-value= true :label="item"></Option>
      </Select>
    </div>
    <!-- 代码编辑器所在div-->
    <div ref="container" class="monaco-editor" style="height: 90%">

    </div>
    <div class="footBanner">
      <Button @click="submitCode">提交代码</Button>
      <Button @click="getModel">model实例</Button>
      <Button @click="getCode">获取代码内容</Button>
      <Button @click="getCodeLength">获取代码长度</Button>
      <Button @click="getCursorPosition">获取光标位置</Button>
    </div>
  </div>
</template>

<script>
  /**
   * 字数 选择代码类型    代码提示 光标
   */
  import * as monaco from 'monaco-editor';
  import {addSolutionAndSourceCodeUser} from "@/api/monaco";

  export default {
    name: 'Monaco',
    props:{
      // 从父类得到的问题对象
      getProblem:{}
    },
    data() {
      return {

        // solution 对象
        solutionAndSourceDTO: {
          problemId:0,// 问题 id
          userId:"",// 用户 id
          nick:"",// 用户昵称
          time:0,// 时间限制
          memory:0,// 内存限制
          inDate:0,// 创建时间
          result:0,// 评测结果（等待测评 0，等待重测1 ，正在编译 2，正在重测3，通过4，输出格式错误5，解答错误 6，运行超时 7，内存超限 8，输出超限 9，运行出错 10，编译错误  11，系统错误12，无评测数据 13）
          language:0,// 使用语言（C 0、C++ 1、Java 2、Python 3、PHP4、C# 5、JavaScript 6、GO 7、SQL 8）
          contestId:0,// 比赛 id
          codeLength:0,// 源码长度
          judgetime:0,// 评测时间
          passRate:0,// 通过率
          source:"",// sourcecode 用户代码
        },

        // 使用语言数组
        language:[
          "C",
          "C++",
          "Java",
          "Python",
          "C#",
          "PHP4",
          "JavaScript",
          "GO",
          "SQL",
        ],

        // 编辑器配置项
        defaultOpts: {
          value: '', // 编辑器的默认值
          languages:'javascript',
          theme: 'vs', // 编辑器主题
          roundedSelection: false, // 右侧不显示编辑器预览框
          autoIndent: true, // 自动缩进
          lineHeight: 20, // 行高
          fontSize: 15, // 字体大小
          useTabStops: true,//使用tab自动缩进
          automaticLayout: true,//自适应大小
        }
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      // 选择那种语言书写代码
      getLanguage(e){
        // console.log(e);
        this.solutionAndSourceDTO.language = e;
      },

      // 提交代码
      submitCode(){
        this.solutionAndSourceDTO.source = this.monacoEditor.getValue();
        this.solutionAndSourceDTO.problemId = this.getProblem.problemId;
        this.solutionAndSourceDTO.time = this.getProblem.timeLimit;
        this.solutionAndSourceDTO.memory = this.getProblem.memoryLimit;
        this.solutionAndSourceDTO.codeLength = this.monacoEditor.getModel().getValueLength();
        addSolutionAndSourceCodeUser(this.solutionAndSourceDTO);
      },

      // 初始化代码编辑器
      init() {
        // 初始化container的内容，销毁之前生成的编辑器
        this.$refs.container.innerHTML = '';
        this.editorOptions = Object.assign(this.defaultOpts, this.opts);
        // 生成编辑器对象 两个参数，第一个为所在div 第二个为编辑器配置
        this.monacoEditor = monaco.editor.create(this.$refs.container, this.editorOptions);
        this.solutionAndSourceDTO.userId = this.$store.state.user.info.id;
        this.solutionAndSourceDTO.nick = this.$store.state.user.info.name;
      },

      // 获取model实例
      getModel() {
        console.log(this.monacoEditor.getModel());
      },

      // 获取代码内容
      getCode() {
        alert(this.monacoEditor.getValue());
      },

      // 获取代码长度
      getCodeLength() {
        // chars, including \n, \t !!!
        //
        alert(this.monacoEditor.getModel().getValueLength());
      },

      // 获取光标位置
      getCursorPosition() {
        let line = this.monacoEditor.getPosition().lineNumber;
        let column = this.monacoEditor.getPosition().column;
        alert("行:" + line+" 列:"+column);
      },
    }
  }
</script>

<style scoped lang="less">
  .footBanner {
  width: 100%;
  height: 52px;
  padding: 10px 0 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  background-color: white;
  flex: 0 0 auto;
  overflow: hidden;
}
</style>
